<template>
  <div id="bottomLeft">
    <div class="bg-color-black d-flex">
      <div class="d-flex pt-2 pl-2">
        <span>
          <icon name="chart-bar"
                class="text-icon"></icon>
        </span>
        <div class="d-flex jc-between"
             style="width:100%">
          <span class="fs-xl text mx-2">今日数据相比</span>
          <date-picker v-model="value2"
                       value-type="format"
                       format="YYYY-MM-DD"></date-picker>
        </div>
      </div>
      <div>
        <table>
          <tr>
            <td class="label">
              <div>书记数</div>
              <div>{{info.social_head+info.village_head}}</div>
              <div :class="info.social_head+info.village_head-(cinfo.social_head+cinfo.village_head)>0?'red':info.social_head+info.village_head-(cinfo.social_head+cinfo.village_head)<0?'colorGrass':''"
                   v-html="getStatus(info.social_head+info.village_head-(cinfo.social_head+cinfo.village_head))"></div>
            </td>
            <td>
              <div>村书记</div>
              <div>{{info.village_head}}</div>
              <div :class="info.village_head-cinfo.village_head>0?'red':info.village_head-cinfo.village_head<0?'colorGrass':''"
                   v-html="getStatus(info.village_head-cinfo.village_head)"></div>
            </td>
            <!-- </tr> -->
            <!-- <tr> -->
            <td>
              <div>社区书记</div>
              <div>{{info.social_head}}</div>
              <div :class="info.social_head-cinfo.social_head>0?'red':info.social_head-cinfo.social_head<0?'colorGrass':''"
                   v-html="getStatus(info.social_head-cinfo.social_head)"></div>
            </td>
          </tr>
          <tr>
            <td class="label">
              <div>两委数</div>
              <div>{{info.liang_wei_qu_num+info.liang_wei_cun_num}}</div>
              <div :class="info.liang_wei_qu_num+info.liang_wei_cun_num-(cinfo.liang_wei_qu_num+cinfo.liang_wei_cun_num)>0?'red':info.liang_wei_qu_num+info.liang_wei_cun_num-(cinfo.liang_wei_qu_num+cinfo.liang_wei_cun_num)<0?'colorGrass':''"
                   v-html="getStatus(info.liang_wei_qu_num+info.liang_wei_cun_num-(cinfo.liang_wei_qu_num+cinfo.liang_wei_cun_num))"></div>
            </td>
            <td>
              <div>村两委</div>
              <div>{{info.liang_wei_cun_num}}</div>
              <div :class="info.liang_wei_cun_num-cinfo.liang_wei_cun_num>0?'red':info.liang_wei_cun_num-cinfo.liang_wei_cun_num<0?'colorGrass':''"
                   v-html="getStatus(info.liang_wei_cun_num-cinfo.liang_wei_cun_num)"></div>
            </td>
            <!-- </tr>
          <tr> -->
            <td>
              <div>社区两委</div>
              <div>{{info.liang_wei_qu_num}}</div>
              <div :class="info.liang_wei_qu_num-cinfo.liang_wei_qu_num>0?'red':info.liang_wei_qu_num-cinfo.liang_wei_qu_num<0?'colorGrass':''"
                   v-html="getStatus(info.liang_wei_qu_num-cinfo.liang_wei_qu_num)"></div>
            </td>
          </tr>
          <tr>
            <td class="label">
              <div>社工数</div>
              <div>{{info.shegong_cun_num+info.shegong_qu_num}}</div>
              <div :class="info.shegong_cun_num+info.shegong_qu_num-(cinfo.shegong_cun_num+cinfo.shegong_qu_num)>0?'red':info.shegong_cun_num+info.shegong_qu_num-(cinfo.shegong_cun_num+cinfo.shegong_qu_num)<0?'colorGrass':''"
                   v-html="getStatus(info.shegong_cun_num+info.shegong_qu_num-(cinfo.shegong_cun_num+cinfo.shegong_qu_num))"></div>
            </td>
            <td>
              <div>村社工</div>
              <div>{{info.shegong_cun_num}}</div>
              <div :class="info.shegong_cun_num-cinfo.shegong_cun_num>0?'red':info.shegong_cun_num-cinfo.shegong_cun_num<0?'colorGrass':''"
                   v-html="getStatus(info.shegong_cun_num-cinfo.shegong_cun_num)"></div>
            </td>
            <!-- </tr>
          <tr> -->
            <td>
              <div>社区社工</div>
              <div>{{info.shegong_qu_num}}</div>
              <div :class="info.shegong_qu_num-cinfo.shegong_qu_num>0?'red':info.shegong_qu_num-cinfo.shegong_qu_num<0?'colorGrass':''"
                   v-html="getStatus(info.shegong_qu_num-cinfo.shegong_qu_num)"></div>
            </td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
import DatePicker from 'vue2-datepicker';
import 'vue2-datepicker/index.css';
export default {
  data () {
    return {
      value2: '',
      cinfo: {}
    };
  },
  mounted () {
    var date = new Date();
    var seperator1 = "-";
    var year = date.getFullYear();
    var month = date.getMonth() + 1;
    var strDate = date.getDate();
    if (month >= 1 && month <= 9) {
      month = "0" + month;
    }
    if (strDate >= 0 && strDate <= 9) {
      strDate = "0" + strDate;
    }
    var currentdate = year + seperator1 + month + seperator1 + strDate;
    this.value2 = currentdate;
    this.getData()
  },
  watch: {
    value2: {
      handler () {
        this.getData()
      }
    },
    info: {
      handler () {
        this.getData()
      }
    }
  },
  components: {
    DatePicker
  },
  props: {
    info: {
      type: Object
    },
    active: {
      default: ''
    },
    type: {
      default: ''
    }
  },
  methods: {
    getData () {
      this.api
        .getAPI('/index/screen/getDayNumCompare', {
          date: this.value2,
          organize_id: this.active,
          type: this.type
        })
        .then((res) => {
          this.cinfo = res.data.data

          console.log(999, res.data.data)
        })
    },
    getStatus (status) {
      switch (true) {
        case status > 0:
          return `(增加${Math.abs(status)}人<i class="iconfont">&#xe750;</i>)`
        case status === 0:
          return `无变化`
        default:
          return `(减少${Math.abs(status)}人<i class="iconfont">&#xe755;</i>)`
      }
    }
  }
}
</script>

<style lang="scss" scoped>
$box-height: 400px;
$box-width: 100%;
#bottomLeft {
  padding: 20px 16px;
  height: $box-height;
  width: $box-width;
  border-radius: 5px;
  table {
    width: 100%;
    tr {
      .label {
        width: 35%;
      }
      td {
        padding: 15px;
        font-size: 1.3rem;
        text-align: center;
        font-weight: bold;
        div:nth-child(2n) {
          margin: 10px;
          font-size: 1.5rem;
          color: #63dff7;
        }
        .red {
          color: #f40002;
        }
      }
    }
  }
  .bg-color-black {
    height: $box-height;
    border-radius: 10px;
    flex-direction: column;
    > div:first-child {
      flex-shrink: 0;
    }
    > div:last-child {
      flex: auto;
    }
  }
  .text {
    color: #c3cbde;
  }
  .chart-box {
    margin-top: 16px;
    width: 170px;
    height: 170px;
    .active-ring-name {
      padding-top: 10px;
    }
  }
}
</style>
<style>
.mx-input {
  background: transparent;
  border: 0;
  color: #fff;
  text-align: right;
  cursor: pointer;
}
</style>
